<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1,MVVM是什么？
    M:Model（模型/数据）
    V:View (试图)
    VM ：ViewModel（试图模型） ：VM是MVVM中的核心部分。（它起到一个核心的非常重要的作用）

    2，MVVM当中倡导了Model和View进行了分离： 如果不分离，使用最原始的javascript代码写项目：
    如果数据发生任意改动，接下来我你们需要大篇幅的操作DOM元素的js代码

    将Model和View分离之后，出现了一个VM核心，这个VM把所有的脏活累活给做了
    也就是说，当Modal发生改变之后，VM自动去更新View，当View发生改动之后
    VM自动取更新Model。我们再也不需要编写DOM的js代码，开发效率提高
-->

    <!-- view V-->
    <div id="app">
        姓名: <input v-model="msg">
    </div>
    <script src="./js/vue.js"></script>
    <script>
        //ViewModel   VM
        new Vue({
            el: '#app',
            // Model  M
            data: {
                msg: 'cyh'
            }
        })

    </script>
</body>

</html>